<!--
 * @Author: Abdusalam0126 2383624944@qq.com
 * @Date: 2025-08-05 18:59:58
 * @LastEditors: Abdusalam0126 2383624944@qq.com
 * @LastEditTime: 2025-08-05 19:00:34
 * @FilePath: src/pages/profile/learnlist.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { useI18n } from '@/composables/useI18n'
import LanguageSwitch from '@/components/LanguageSwitch.vue'
import { usePageTitle } from '@/composables/usePageTitle'

const { t } = useI18n()

// 设置页面标题
usePageTitle('pages/profile/learnlist')

// 响应式数据
const loading = ref(false)
const currentFilter = ref('all')

// 统计信息
const stats = reactive({
  totalTime: '0',
  totalWords: '0',
  averageScore: '0',
  studyDays: '0'
})

// 筛选选项
const filterOptions = [
  { value: 'all', label: 'profile.learnListPage.filter.all' },
  { value: 'today', label: 'profile.learnListPage.filter.today' },
  { value: 'week', label: 'profile.learnListPage.filter.week' },
  { value: 'month', label: 'profile.learnListPage.filter.month' }
]

// 学习记录数据（模拟数据）
const learnRecords = ref([
  {
    id: 1,
    date: '2024-01-15',
    duration: 30,
    words: 50,
    score: 85,
    accuracy: 92
  },
  {
    id: 2,
    date: '2024-01-14',
    duration: 45,
    words: 75,
    score: 78,
    accuracy: 88
  },
  {
    id: 3,
    date: '2024-01-13',
    duration: 20,
    words: 30,
    score: 90,
    accuracy: 95
  }
])

// 设置筛选器
const setFilter = (filter: string) => {
  currentFilter.value = filter
  // 这里可以根据筛选条件重新加载数据
  console.log('设置筛选器:', filter)
}

// 格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return t('profile.page.unknown')
  try {
    const date = new Date(dateString)
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit'
    })
  } catch (error) {
    return t('profile.page.unknown')
  }
}

// 加载学习记录
const loadLearnRecords = async () => {
  loading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 更新统计信息
    stats.totalTime = '95'
    stats.totalWords = '155'
    stats.averageScore = '84'
    stats.studyDays = '3'
    
  } catch (error) {
    console.error('加载学习记录失败:', error)
    uni.showToast({
      title: t('profile.learnListPage.loadFailed'),
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
}

// 页面加载时获取数据
onMounted(() => {
  loadLearnRecords()
})
</script>

<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="header">
      <text class="title">{{ t('profile.learnListPage.title') }}</text>
    </view>

    <!-- 统计信息 -->
    <view class="stats-section">
      <view class="stats-grid">
        <view class="stats-item">
          <text class="stats-value">{{ stats.totalTime }}</text>
          <text class="stats-label">{{ t('profile.learnListPage.stats.totalTime') }}</text>
        </view>
        <view class="stats-item">
          <text class="stats-value">{{ stats.totalWords }}</text>
          <text class="stats-label">{{ t('profile.learnListPage.stats.totalWords') }}</text>
        </view>
        <view class="stats-item">
          <text class="stats-value">{{ stats.averageScore }}</text>
          <text class="stats-label">{{ t('profile.learnListPage.stats.averageScore') }}</text>
        </view>
        <view class="stats-item">
          <text class="stats-value">{{ stats.studyDays }}</text>
          <text class="stats-label">{{ t('profile.learnListPage.stats.studyDays') }}</text>
        </view>
      </view>
    </view>

    <!-- 筛选器 -->
    <view class="filter-section">
      <view class="filter-tabs">
        <view 
          v-for="filter in filterOptions" 
          :key="filter.value"
          class="filter-tab"
          :class="{ active: currentFilter === filter.value }"
          @click="setFilter(filter.value)"
        >
          <text class="filter-text">{{ t(filter.label) }}</text>
        </view>
      </view>
    </view>

    <!-- 学习记录列表 -->
    <view class="list-section">
      <view v-if="loading" class="loading-container">
        <text class="loading-text">{{ t('profile.learnListPage.loading') }}</text>
      </view>
      
      <view v-else-if="learnRecords.length === 0" class="empty-container">
        <text class="empty-text">{{ t('profile.learnListPage.noData') }}</text>
      </view>
      
      <view v-else class="record-list">
        <view 
          v-for="record in learnRecords" 
          :key="record.id"
          class="record-item"
        >
          <view class="record-header">
            <text class="record-date">{{ formatDate(record.date) }}</text>
            <text class="record-score">{{ record.score }}分</text>
          </view>
          <view class="record-details">
            <view class="detail-item">
              <text class="detail-label">{{ t('profile.learnListPage.item.duration') }}:</text>
              <text class="detail-value">{{ record.duration }}分钟</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">{{ t('profile.learnListPage.item.words') }}:</text>
              <text class="detail-value">{{ record.words }}个</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">{{ t('profile.learnListPage.item.accuracy') }}:</text>
              <text class="detail-value">{{ record.accuracy }}%</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 语言切换悬浮按钮 -->
    <LanguageSwitch />
  </view>
</template>

<style scoped>
.container {
  min-height: 100vh;
  background: #f8f9fa;
  padding: 20rpx;
}

.header {
  background: white;
  padding: 30rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.stats-section {
  background: white;
  padding: 30rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.stats-grid {
  display: flex;
  justify-content: space-around;
}

.stats-item {
  text-align: center;
  flex: 1;
}

.stats-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #007aff;
  display: block;
  margin-bottom: 8rpx;
}

.stats-label {
  font-size: 24rpx;
  color: #666;
  display: block;
}

.filter-section {
  background: white;
  padding: 20rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.filter-tabs {
  display: flex;
  gap: 20rpx;
}

.filter-tab {
  flex: 1;
  padding: 20rpx;
  text-align: center;
  border-radius: 12rpx;
  background: #f8f9fa;
  transition: all 0.3s ease;
}

.filter-tab.active {
  background: #007aff;
}

.filter-text {
  font-size: 26rpx;
  color: #333;
  transition: color 0.3s ease;
}

.filter-tab.active .filter-text {
  color: white;
}

.list-section {
  background: white;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.loading-container,
.empty-container {
  padding: 60rpx 30rpx;
  text-align: center;
}

.loading-text,
.empty-text {
  font-size: 28rpx;
  color: #666;
}

.record-list {
  padding: 20rpx;
}

.record-item {
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  transition: background-color 0.2s ease;
}

.record-item:last-child {
  border-bottom: none;
}

.record-item:active {
  background-color: #f8f9fa;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.record-date {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.record-score {
  font-size: 28rpx;
  color: #007aff;
  font-weight: bold;
}

.record-details {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-label {
  font-size: 24rpx;
  color: #666;
}

.detail-value {
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
}

/* 响应式调整 */
@media (max-width: 750rpx) {
  .stats-grid {
    flex-wrap: wrap;
    gap: 20rpx;
  }
  
  .stats-item {
    flex: 0 0 calc(50% - 10rpx);
  }
  
  .filter-tabs {
    flex-wrap: wrap;
  }
  
  .filter-tab {
    flex: 0 0 calc(50% - 10rpx);
  }
}
</style>